<template>
	<view class="container">
		<!-- <setAutoMeal ref="pop1"></setAutoMeal> -->
		<view class="order-success-bg"></view>
		<view class="order-success-ul p_rlt">
			<view class="order-success-li flex flex-direction align-center">
				<uni-transition :mode-class="'fade'" :show="payStatus=='5'">
					<view class="fcon-wxpay icon-wxpay"></view>
					<view class="sucview">{{curTitle}}</view>
				</uni-transition>
				<view v-if="payStatus!='5'" class="p_rlt img_box text-acenter">
					<text class="timeact text-acenter text-ngreen"
						:class="{'checking':payStatus!='5'}">{{comTime}}</text>
					<image class="ldimg" src="https://cdn-static.yekjx.com/food/images/sub_loading01.gif"
						mode="aspectFill"></image>
				</view>
				<view class="sucname">颐而康</view>
				<text class="sucpri">¥{{linkParam.payAmount||0}}</text>
				<view class="full_btn ab padding-bottom-xl">
					<view class="mbtn space" @click="tapNavto">
						完成
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script lang="ts" setup>
	import { nextTick, ref } from "vue";
	import { onLoad, onUnload } from "@dcloudio/uni-app";
	// import setAutoMeal from '@/components/setAutoMeal/setAutoMeal.vue';
	import { getOrderStatus } from '@/api/vmeitime-http/index.js'
	import { showLoading, hideLoading } from '@/utils/helper';
	import mApi from "@/utils/mapi";
	import { mnavTo } from '@/utils/helper';
	const pop1 = ref(null)
	// const status = ref(2)

	const pageOrg = ref('')
	const linkParam = ref<any>({})
	const curTitle = ref('')
	onLoad(async options => {
		actTime();
		pageOrg.value = options.pageOrg || '';
		linkParam.value = options;
		// payAmount orderId
		curTitle.value = pageOrg.value == 'openVip' ? '开通成功' : pageOrg.value == 'recharge' ? '充值成功' : '下单成功';
		uni.setNavigationBarTitle({title: curTitle.value});
		// const nfrom = uni.getStorageSync('fromPages') || '';//暂时
		// if (nfrom == 'meal') {
		// 	nextTick(()=>{
		// 		pop1?.value?.open()
		// 		uni.removeStorageSync('fromPages')
		// 	})
		// }
		showLoading();
		getStatus();
	})
	const comTime = ref(3)
	const intervalid = ref(null)
	const tapNavto = () => {
		if (pageOrg.value == 'openVip' || pageOrg.value == 'recharge') {
			uni.navigateBack()
			return
		}
		uni.redirectTo({url: `/pages/order/orderDetails/orderDetails?vbill_id=${linkParam.value.vbill_id}&&type=${linkParam.value.type}&&activeType=${linkParam.value.activeType}`})
	}
	const actTime = () => {
		intervalid.value = setInterval(() => {
			comTime.value--;
			if (comTime.value <= 0) {
				comTime.value = 1;
				clearInterval(intervalid.value);
			}
		}, 1000);
	}
	const odrstatus = ref({
		created: false,
		checkNums: 0,
		ctime: null
	})
	onUnload(() => {
		hideLoading()
		odrstatus.value.ctime && clearTimeout(odrstatus.value.ctime);
	})
	const payStatus = ref('')
	// 查看支付状态
	const getStatus = async () => {
		let id = linkParam.value.vbill_id
		if (!id) {
			hideLoading()
			return
		}
		actTime()
		let rstatus = odrstatus.value
		try {
			let res = await getOrderStatus({ vbill_id: id })
			if (!res.result || !res.object) {
				hideLoading()
				if (rstatus.created) { return; }
				uni.showModal({
					title: '提示',
					content: res.shortMessage || '支付超时，请联系客服处理。',
					showCancel: false,
					confirmText: '知道了',
					success: function (res) {
						if (res.confirm) {
							uni.navigateBack();
						}
					}
				})
				return;
			}
			rstatus.ctime && clearTimeout(rstatus.ctime);
			let orderData = res.object;
			// if(orderData.vchildren_bill_ids&&orderData.vchildren_bill_ids.length>0){
			// 	mold = 'host';
			// }
			if (orderData.vpay_status == '5') {
				payStatus.value = orderData.vpay_status
				hideLoading()
				rstatus.created = true;
				mApi.msg('支付成功')
				// 支付成功
				// setTimeout(function() {
				// 	//支付完成后展示拼团信息
				// }, 800);
			} else {
				rstatus.checkNums++;
				if (!rstatus.created && rstatus.checkNums < 20) {
					rstatus.ctime = setTimeout(function () {
						getStatus();
					}, 1500);
				} else {
					hideLoading()
					uni.showModal({
						title: '提示',
						content: '支付超时，请联系客服处理。',
						showCancel: false,
						confirmText: '知道了',
						success: function (res) {
							if (res.confirm) {
								tapNavto()
							}
						}
					})
				}
			}
		} catch (e) {
			hideLoading()
			//TODO handle the exception
		}

	}
</script>

<style lang="scss">
	page {
		background: #FAFAFA;
	}

	.order-success-bg {
		width: 100%;
		height: 390rpx;
		flex-shrink: 0;
		background: #70DEB1;
		// background: linear-gradient(180deg, #B9F9DE 0%, #EFFFEB 51%, #FAFDFE 100%);
	}

	.img_box,
	.ldimg {
		width: 300rpx;
		height: 300rpx;
	}

	.timeact {
		transition: all;

		&.checking {
			// opacity: 1;
			animation: fadetbox 2s linear infinite;
		}
	}

	.timeact {
		position: absolute;
		left: 0;
		top: 27rpx;
		width: 300rpx;
		height: 300rpx;
		font-size: 110rpx;
		font-weight: 500;
	}

	.order-success-ul {
		position: absolute;
		width: calc(100vw - 32rpx);
		height: 90vh;
		flex-shrink: 0;
		border-radius: 8px;
		background: #FFF;
		box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);
		top: 40rpx;
		left: 16rpx;

		.order-success-li {
			padding-top: 18%;

			.icon-wxpay {
				font-size: 100rpx;
				color: #15BA11;
			}

			.suctext {
				color: #53A87F;
				text-align: center;
				font-family: "Microsoft YaHei UI";
				font-size: 40rpx;
				letter-spacing: 0.4px;
				padding-top: 50rpx;
			}

			.sucname {
				font-size: 40rpx;
				letter-spacing: 0.4px;
				padding-top: 18%;
			}

			.sucpri {
				font-family: "Microsoft YaHei UI";
				font-size: 100rpx;
				letter-spacing: -0.25px;
				padding-top: 12.7rpx;
			}
		}

	}

	@keyframes fadetbox {
		0% {
			opacity: 0.6;
			transform: scale(0.98);
		}

		50% {
			opacity: 1;
			transform: scale(1);
		}

		100% {
			opacity: 0.6;
			transform: scale(0.98);
		}
	}
</style>